import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
// 配置 pinia 持久化插件，该插件的默认配置有如下特性
// 1、使用 localStorage 进行存储
// 2、store.$id 作为 storage 默认的 key
// 3、使用 JSON.stringify/JSON.parse 进行序列化/反序列化
// 4、整个 state 默认将被持久化
pinia.use(piniaPluginPersistedstate)

export default pinia

// 从pinia中引入defineStore函数来定义store
// pinia官方文档： https://pinia.web3doc.top/core-concepts/getters.html
// pinia持久化插件文档： https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

// 请注意，store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，
// 就像setup 中的props 一样，我们不能对其进行解构：因为解构会破坏响应式。应该使用 const store = useStore() 来获取 store 对象。
// 为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时，这很有用：
/*
    const store = useStore()
    // `name` 和 `doubleCount` 是响应式引用
    // 这也会为插件添加的属性创建引用
    // 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性
    const { name, doubleCount } = storeToRefs(store)
*/